<template>
	<nav class="footer">
		<div 
			class="footer-item" 
			:class="{ active: isActive('/index') }"
			@click="toIndex"
		>
			<i class="material-icons">home</i>
			<span class="footer-label">首页</span>
		</div>
		<div 
			class="footer-item" 
			:class="{ active: isActive('/gameSnake') }"
			@click="toSnake"
		>
			<i class="material-icons">explore</i>
			<span class="footer-label">发现</span>
		</div>
		<div 
			class="footer-item" 
			:class="{ active: isActive('/orderList') }"
			@click="toOrderList"
		>
			<i class="material-icons">receipt</i>
			<span class="footer-label">订单</span>
		</div>
		<div 
			class="footer-item" 
			:class="{ active: isActive('/myInfo') }"
			@click="toMyInfo"
		>
			<i class="material-icons">person</i>
			<span class="footer-label">我的</span>
		</div>
	</nav>
</template>

<script>
	export default {
		name: 'AppFooter',
		methods: {
			toIndex() {
				this.$router.push({ path: '/index' });
			},
			toOrderList() {
				this.$router.push({ path: '/orderList' });
			},
			toMyInfo() {
				this.$router.push({ path: '/myInfo' });
			},
			toSnake() {
				this.$router.push({ path: '/gameSnake' });
			},
			isActive(path) {
				return this.$route.path === path;
			}
		}
	}
</script>

<style scoped>
	.footer {
		width: 100%;
		height: 80px;
		background-color: #fff;
		border-top: 1px solid #e0e0e0;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
		
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;

		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 12px 0;
	}

	.footer-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
		flex: 1;
		padding: 12px 16px;
		cursor: pointer;
		user-select: none;
		transition: all 0.3s ease;
		border-radius: 12px;
		margin: 0 4px;
		color: #666;
		position: relative;
	}

	.footer-item:hover {
		background-color: #f5f5f5;
		color: #1976D2;
	}

	.footer-item.active {
		color: #1976D2;
	}

	.footer-item.active::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		background-color: #1976D2;
		border-radius: 0 0 3px 3px;
	}

	.footer-item .material-icons {
		font-size: 22px;
		transition: all 0.3s ease;
	}

	.footer-item.active .material-icons {
		transform: scale(1.1);
	}

	.footer-item:hover .material-icons {
		transform: scale(1.05);
	}

	.footer-label {
		font-size: 14px;
		font-weight: 500;
		transition: all 0.3s ease;
		white-space: nowrap;
	}

	.footer-item.active .footer-label {
		font-weight: 600;
	}

	/* 移动端适配 */
	@media (max-width: 768px) {
		.footer {
			height: 72px;
			padding: 10px 0;
		}

		.footer-item {
			padding: 10px 12px;
			gap: 6px;
		}

		.footer-item .material-icons {
			font-size: 20px;
		}

		.footer-label {
			font-size: 13px;
		}
	}

	/* 超小屏幕 */
	@media (max-width: 480px) {
		.footer {
			height: 68px;
			padding: 8px 0;
		}

		.footer-item {
			padding: 8px 10px;
			margin: 0 2px;
			gap: 5px;
		}

		.footer-item .material-icons {
			font-size: 18px;
		}

		.footer-label {
			font-size: 12px;
		}
	}
</style>
